<!--  -->
<template>
  <div>动态组件
  
    <el-button-group class="ml-4">
    <el-button @click="check(0)" type="primary">A</el-button>
    <el-button @click="check(1)" type="primary">B</el-button>
    <el-button @click="check(2)" type="primary">C</el-button>
  </el-button-group>

  <div>
 <KeepAlive exclude="CCom">
    <component :is="tags[currentTab]"></component>
 </KeepAlive> 
  </div>
  
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import ACom from './ACom.vue';
import BCom from './BCom.vue';
import CCom from './CCom.vue';

const  tags=[ACom,BCom,CCom];
const currentTab =ref(0);

const check = (index:number) => {
    currentTab.value = index;
}

 

 


 


</script>
<style scoped>
</style>